<template>
  <div id="contentRight">
    <section id="sec1">
      <p class="p1">算领</p>
      <div class="d2">
        <div>
          <p class="p1">我的当前算龄</p>
          <p class="p2">{{data.powerTimeNow}} TD</p>
        </div>
        <div>
          <p class="p1">历史最高算领</p>
          <p class="p2">{{data.powerTimeYesterdayMax}} TD</p>
        </div>
      </div>
      <div class="range range1" v-if="data.powerTimeNow < 1000">
        <p class="p1">当前算领</p>
        <span class="abPower standardPower" style="right: 0;">1000TD</span>
        <div class="rangeStyle">
          <p :style="rangeWidth"></p>
        </div>
      </div>
      <div class="range range1 range2" v-if="data.powerTimeNow >= 1000">
        <span class="abPower standardPower" :style="markStyle">{{data.userPower}}TD</span>
        <div class="rangeStyle">
          <p :style="rangeWidth"></p>
        </div>
      </div>
      <p class="p3" v-if="data.powerTimeNow < 1000">
        <span class="left">当前你的算龄未达到标准算龄， 暂未获得双挖矿机的资格</span>
        <span class="right">入门算龄</span>
      </p>
      <p class="p3" v-if="data.powerTimeNow >= 1000">
        <span class="left">您的当前增长速度{{data.userPower}}TD.人均增长速度{{data.averagePower}}TD</span>
        <span class="right">{{maxPower}}TD</span>
      </p>
    </section>
    <section id="sec2">
      <p class="p1">产出区间排名</p>
      <div class="d2">
        <img src="../common/imgs/powrRank.png" alt="" class="rankImg">
        <p class="level level1">
          <span class="s1">P1 矿霸</span>
          <span class="s2">
            算领(大于{{data.oneLevel}})
            <img src="../common/imgs/iamHere.png" alt="" class="iamHere" v-if="statusLevel == 1">
          </span>
        </p>
        <p class="level level2">
          <span class="s1">P2 矿主</span>
          <span class="s2">
            算领({{data.twoLevel}} - {{data.oneLevel}})
            <img src="../common/imgs/iamHere.png" alt="" class="iamHere" v-if="statusLevel == 2">
          </span>
        </p>
        <p class="level level3">
          <span class="s1">P3 矿工</span>
          <span class="s2">
            算领({{data.threeLevel}} - {{data.twoLevel}})
            <img src="../common/imgs/iamHere.png" alt="" class="iamHere" v-if="statusLevel == 3">
          </span>
        </p>
        <p class="level level4">
          <span class="s1">P4 小矿工</span>
          <span class="s2">
            算领(0 - 1000)
            <img src="../common/imgs/iamHere.png" alt="" class="iamHere" v-if="statusLevel == 4">
          </span>
        </p>
      </div>
      <p class="p3 notEnough" v-if="data.powerTimeNow < 1000">
        您的算龄未达标，未获得双挖矿机资源，没有机内排名区间，快去下单算力加速成长，成长越快，等级越高，权益越大
      </p>
      <p class="p3" v-if="data.powerTimeNow >= 1000">
        您目前排名在<span class="yellow">P{{statusLevel}}区间（算龄{{levelText}}）</span>，
        日增长速度比人均增长速度
        <span v-if="data.userPower < data.averagePower">少{{this.accSub(data.averagePower ,  data.userPower)}}</span>
        <span v-if="data.userPower >= data.averagePower">多{{this.accSub(data.userPower ,  data.averagePower)}}</span>
        TD。 快速去下单加速成长，成长越快，等级越高，权益越大。
      </p>
      <p class="p4">
        <router-link to="/machinemarket">加速成长</router-link>
      </p>
    </section>
  </div>
</template>
<script>
  import { powerLevel } from '../http/api';
  export default {
    name : 'powerLevel',
    data(){
      return{
        data : {},
        maxPower : 16000,
        markStyle :{ left : '3%' , 'margin-left' : '-50px' , 'transition' : 'left 1s' },
        rangeWidth : { width : '0' , 'transition' : 'width 1s'},
        statusLevel : null,
        levelText : null,
      }
    },
    mounted() {
      let thiz = this;
      powerLevel().then(res => {
        if(res.code == 200){
          let data = res.data;
          thiz.data = data;
          thiz.for(data , (item , key) => {
            if(thiz.isNumber(item)){
              data[key] = Number(item);
            }
          });
          this.drawRange();
          this.getPowerLevel();
        }
      });
    },
    methods : {
      drawRange(){
        let data = this.data;
        let powerTimeNow = Number(data.powerTimeNow);//我的当前算领
        let averagePower = Number(data.averagePower);//人均增长
        let userPower = Number(data.userPower);//我的增长
        let width = null;
        let thiz = this;
        this.$nextTick(()=>{
          thiz.timeout(()=>{
            if(powerTimeNow < 1000){
              width =  this.accDiv(powerTimeNow , 1000) * 100;
            }
            if(powerTimeNow >= 1000){
              averagePower = userPower * 2;
              thiz.maxPower = averagePower;
              width =  this.accDiv(userPower , averagePower) * 100;
              let markLeft = width;
              markLeft = markLeft < 3 ? 3 : markLeft;
              thiz.markStyle.left = markLeft > 100 ? 100 : markLeft + '%';
            }
            thiz.rangeWidth.width = width > 100 ? 100 : width + '%';
          },200)
        })
      },
      getPowerLevel(){
        let data = this.data;
        let calcuNumber = data.powerTimeNow;//当前算领
        let boundary = {
          td_p80: data.threeLevel,
          td_p94: data.twoLevel,
          td_p99: data.oneLevel
        };
        let statusLevel = 4;//登记
        let levelText = null;//文字
        if (calcuNumber < boundary.td_p80) {
          statusLevel = 4;
          levelText = "低于第80%位数"
        } else if (calcuNumber < boundary.td_p94) {
          statusLevel = 3;
          levelText = "高于第80%位数,小于第94%位数"
        } else if (calcuNumber < boundary.td_p99) {
          statusLevel = 2;
          levelText = "高于第94%位数,小于第99%位数"
        } else {
          statusLevel = 1;
          levelText = "高于第99位数"
        }
        this.levelText = levelText;
        this.statusLevel = statusLevel;
      }
    }
  }
</script>
<style lang="less" scoped>
  @import "../common/style/common";
  @import "../common/style/public.css";
  #sec1{
    >.p1{
      font-size: 24px;color: #262626;
    }
    >.d2{
      overflow: hidden;padding-top: 26px;
      >div{
        float: left;
        &:nth-child(2){
          padding-left: 156px;
        }
        >.p1{
          color: #999999;font-size: 12px;
        }
        >.p2{
          color: #262626;font-size: 16px;font-weight: 600;padding-top: 11px;
        }
      }
    }
    >.range{
      .colorYellow;padding-top: 31px;position: relative;padding-right: 32px;margin-top: 9px;
      >.p1{
        font-size: 14px;
      }
      >.rangeStyle{
        height: 7px;background: rgba(255, 177, 73, 0.16);width: 100%;overflow: hidden;margin-top: 8px;.borderRadius();
        >p{
          float: left;height: 100%;width: 0%;.bgYellow;border-radius: 10px;
        }
      }
      >.abPower{
        position: absolute;min-width: 64px;height: 30px;padding: 0 10px;
        background: url("../common/imgs/youPowerBg.png");background-size: 100% 100%;top: 0;
        text-align: center;font-size: 14px;line-height: 30px;
      }
    }
    >.range2{
      padding-top: 38px;
    }
    >.p3{
      overflow: hidden;padding-top: 13px;
      >.left{
        color: #999;font-size: 12px;float: left;
      }
      >.right{
        .colorYellow;font-size: 14px;float: right;
      }
    }
  }
  #sec2{
    margin-top: 10px;padding-bottom: 52px;
    >.p1{
      font-size: 18px;padding-bottom: 37px;
    }
    >.d2{
      text-align: center;position: relative;margin: 0 auto;width: 332px;
      .rankImg{
        width: 100%;height: 332px;
      }
      >.level{
        position: absolute;z-index: 1;left: 100%;padding-left: 4px;text-align: left;
        width: 100%;
        >span{
          display: inline-block;height: 20px;line-height: 20px;
        }
        >.s1{
          .bgYellow;color: #fff;padding: 0 6px;font-size: 12px;.borderRadius(1px);width: 66px;text-align: center;
        }
        >.s2{
          .colorYellow;font-size: 12px;position: relative;
          >.iamHere{
            position: absolute;right: -85px;width: 75px;top: -45%;
          }
        }
      }
      >.level1{
        top: 10%;
      }
      >.level2{
        top: 19.5%;
      }
      >.level3{
        top: 33%;
      }
      >.level4{
        top: 48%;
      }
    }
    >.p3{
      padding: 35px 37px;.borderRadius;background: #FAFAFA;color: #A7A5A2;font-size: 14px;margin-top: 8px;line-height: 150%;
      >span{
        display: contents;
      }
      >.yellow{
        .colorYellow;
      }
    }
    >.p4{
      text-align: center;padding-top: 21px;
      >a{
        .submit;width: 225px;height: 38px;line-height: 38px;font-size: 14px;
      }
    }
  }
</style>
